<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024-05-22 20:22:04
 * @LastEditors: tenet 18742176629@163.com
 * @LastEditTime: 2024-05-22 23:18:21
 * @FilePath: /chain-link-api-front-admin/src/views/record/index.vue
 * @Description: 上币记录
-->
<template>
  <!-- 查询 -->
<!--  <div class="queryBar">-->
<!--    <el-form :inline="true" :model="queryParams" class="demo-form-inline">-->
<!--      <el-form-item :label="$t('record.RecordId')" style="width: 250px; margin-bottom:0; margin-right: 20px">-->
<!--        <el-input v-model.trim="queryParams.id" :placeholder="$t('global.PleaseInput') + $t('record.RecordId')"-->
<!--                  clearable/>-->
<!--      </el-form-item>-->
<!--      <el-form-item :label="$t('table.Address')" style="width: 250px; margin-bottom:0; margin-right: 20px">-->
<!--        <el-input v-model.trim="queryParams.address" :placeholder="$t('global.PleaseInput') + $t('table.Address')"-->
<!--                  clearable/>-->
<!--      </el-form-item>-->
<!--      <el-form-item :label="$t('record.RecordStatus')" style="width: 250px; margin-bottom: 0; margin-right: 20px">-->
<!--        <el-select v-model.trim="queryParams.status"-->
<!--                   :placeholder="$t('global.PleaseSelect') + $t('record.RecordStatus')" clearable>-->
<!--          <el-option v-for="(item, index) in 3" :key="index" :label="item.label" :value="item.value"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      &lt;!&ndash; 开始时间与结束时间 &ndash;&gt;-->
<!--      <el-form-item :label="$t('table.Timestamp')" style="width: 250px; margin-bottom:0; margin-right: 20px">-->
<!--        <el-date-picker v-model="queryParams.time" type="datetimerange" :start-placeholder="$t('recharge.StartTime')"-->
<!--                        :end-placeholder="$t('recharge.EndTime')" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD"-->
<!--                        time-format="hh:mm:ss" />-->
<!--      </el-form-item>-->
<!--      <el-form-item style="margin-bottom: 0">-->
<!--        <el-button type="primary" :icon="Search" @click="onSubmit(queryParams.id, queryParams.orderStatus)">{{-->
<!--            $t('button.Search')-->
<!--          }}-->
<!--        </el-button>-->
<!--        <el-button type="default" :icon="Refresh" plain @click="onReset()">{{ $t('button.Reset') }}</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    &lt;!&ndash;    查询按钮&ndash;&gt;-->
<!--&lt;!&ndash;    <div class="query_btns">&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;      <el-button type="primary" plain :icon="Search" size="small" @click="handleCLick('add')">{{$t('button.Add') }}</el-button>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;      <el-button type="success" plain :icon="Edit" size="small" @click="handleCLick('edit')">{{$t('button.Edit') }}</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-button type="danger" plain :icon="Delete" size="small" @click="handleCLick('del')">{{$t('button.Del') }}</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-button type="info" plain size="small" @click="userImport()">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-icon class="el-icon&#45;&#45;right">&ndash;&gt;-->
<!--&lt;!&ndash;          <Upload/>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-icon>&ndash;&gt;-->
<!--&lt;!&ndash;        {{$t('button.Import') }}&ndash;&gt;-->
<!--&lt;!&ndash;      </el-button>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-button type="warning" plain size="small" @click="userExport()">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-icon class="el-icon&#45;&#45;right">&ndash;&gt;-->
<!--&lt;!&ndash;          <Upload/>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-icon>&ndash;&gt;-->
<!--&lt;!&ndash;        {{ $t('button.Export') }}&ndash;&gt;-->
<!--&lt;!&ndash;      </el-button>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--  </div>-->

  <el-table :data="tableData"  stripe border  ref="multipleTableRef" style="width: 100%;" size="large" v-loading="loading" max-height="600px">
    <el-table-column prop="id" :label="$t('record.RecordId')" width="250" align="center"></el-table-column>
    <el-table-column prop="chainName" :label="$t('table.ChainName')" width="" align="center"></el-table-column>
    <el-table-column prop="address" :label="$t('table.Address')" width="250" align="center"></el-table-column>
    <el-table-column prop="userName" :label="$t('user.UserName')" width="" align="center"></el-table-column>
    <el-table-column prop="email" :label="$t('record.Email')" width="" align="center"></el-table-column>
    <el-table-column prop="timestamp" :label="$t('record.ApplicationTime')" width="" align="center">
      <template #default="scope">
        {{ formatTimestamp(scope.row.timestamp) }}
      </template>
    </el-table-column>

<!--    <el-table-column fixed="right" :label="$t('global.Operation')" width="" align="center">-->
<!--      <template #default="scope">-->
<!--        <el-button link type="primary" size="small" @click="userEdit(scope, 'edit')">{{ $t('button.Edit') }}</el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
  </el-table>

  <div class="page">
    <el-pagination v-model:current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next"
                   :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>

  <el-dialog
      :title="dialogTitleText"
      v-model="dialogVisible"
      width="30%"
      @closed="handleClose"
  >
    <!-- 表单内容将在这里 -->
    <div v-if="dialogTitle === 'add' || dialogTitle === 'edit'">
      <el-form :model="ruleForm" label-width="80px">
        <el-form-item :label="$t('record.UserName')">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('record.UserId')">
          <el-input v-model="ruleForm.userId"></el-input>
        </el-form-item>
        <el-form-item :label="$t('record.UserStatus')">
          <el-switch
              v-model="ruleForm.status"
              class="ml-2"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleSwitchChange"
          />
        </el-form-item>
        <!-- 其他表单项... -->
      </el-form>
    </div>

    <div v-if="dialogTitle === 'freeze' ">
      {{ $t('message.FreezeTip') }}
    </div>
    <!-- 对话框底部按钮 -->
    <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose"> {{$t('global.Cancel')}} </el-button>
    <el-button type="primary" @click="handleConfirm">{{ $t('global.Submit') }}</el-button>
</span>
  </el-dialog>

</template>

<script setup>
import {ref, onMounted, unref, reactive, watch} from 'vue'
import {Delete, Edit, Refresh, Search, Upload} from "@element-plus/icons-vue";
import {formatTimestamp} from "@/utils/timeStamp";
import { getApplyTokenList } from "@/require/api.js"
import {ElPagination, ElTable} from "element-plus";
import {useI18n} from "vue-i18n";
const {t} = useI18n();

// 在组件被挂载后执行
onMounted(() => {
  getList();
  // 初始化时也可以设置一次 dialogTitle 和 dialogTitleText
  if (dialogTitle.value === 'add') {
    dialogTitleText.value = t('dialog.UserAdd');
  } else if(dialogTitle.value === 'edit') {
    dialogTitleText.value = t('dialog.UserEdit');
  } else{
    dialogTitleText.value = ''
  }
});

// 查询参数
const queryParams = reactive([
  {
    id: '',
    chainName:'',
    status: '',
    time:[],
    startTime: '',
    endTime: '',

  }
])

const pageSize = ref(10)
const pageIndex = ref(1)
const total = ref(0)
const tableData = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogTitleText = ref('')

// 获取上币申请记录
async function getList(){
  try {
    loading.value = true
    const { code, data, msg } = await getApplyTokenList({
      pageSize: pageSize.value,
      pageIndex: pageIndex.value,
    })
    if( code === 200 ){
      tableData.value = data.list
      total.value = data.total
    }
  }catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

// 表单数据
const ruleForm = reactive({
  userName: '',
  userId: '',
  status: ''
})


// 表单提交方法
const handleConfirm = () => {
  if (dialogTitle.value === 'add') {
    // 新增逻辑
  } else if (dialogTitle.value === 'edit') {
    // 编辑逻辑
  } else if (dialogTitle.value === 'delete') {
    // 删除确认逻辑，通常会有一个二次确认
  } else if(dialogTitle.value === 'freeze'){
    // 冻结逻辑
    console.log('已冻结')
  }
  handleClose(); // 关闭对话框
}
// 监听 dialogTitle 的变化
watch(dialogTitle, (newValue) => {
  // 如果既不是 'add' 也不是 'edit'，则清空文本
  dialogTitleText.value = newValue === 'add' ? t('dialog.UserAdd') : newValue === 'edit' ? t('dialog.UserEdit') : '';
});

// 点击按钮方法
const handleCLick = (v) => {
  console.log(v)
  dialogVisible.value = true;
  dialogTitle.value = v
  // dialogTitleText.value = dialogTitle.value === 'add' ? t('dialog.UserAdd') : t('dialog.UserEdit')
  if (v === 'add') {
    // 调用添加方法
  } else if (v === 'edit') {
    // 调用编辑方法
  } else if (v === 'del') {
    // 调用删除方法
  }
}

// 编辑当前行用户方法
const userEdit = (scope, v) => {
  dialogVisible.value = true
  dialogTitle.value = v
}
// 冻结当前用户方法
const userFreeze = (scope, v) => {
  dialogVisible.value = true
  dialogTitle.value = v

}


// 导入用户方法
const userImport = () => {
  console.log('userImport')
}
// 导出用户方法
const userExport = () => {
  console.log('userExport')
}
// 改变用户状态开关 方法
const handleSwitchChange = (val) => {
  console.log(val)

}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
  console.log('关闭')
  dialogTitle.value = '';
  dialogTitleText.value = ''
  resetForm()
}

// 重置dialog表单数据
const resetForm = () => {
  ruleForm.userName = ''
  ruleForm.userId = ''
  ruleForm.status = ''
}

// 重置查询数据方法
const onReset = () => {
  onClear();
  getList();
}

// 清除  queryParams
const onClear = () => {
  queryParams.id = ''
  queryParams.orderStatus = ''
}

// 搜索方法
const onSubmit = (id, orderStatus) => {
  // 查询时把 pageIndex 重置为1
  pageIndex.value = 1
  getList(id, orderStatus);
}

// 分页
function handleSizeChange(val) {
  pageSize.value = val
  getList()
}

// 分页
function handleCurrentChange(val) {
  pageIndex.value = val
  getList(queryParams.id, queryParams.orderStatus)
}
</script>

<style scoped lang="less">
.queryBar {
  background-color: #fff;
  margin: .1rem 0;
  padding: .1rem 0;
  box-sizing: border-box;

  .demo-form-inline {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .query_btns {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: .15rem 0 0 0;
  }
}
</style>